<template>
  <div class="view-container">
    <header-module :left-custom="true" :padding="true">
      <template #left-con>
        <div v-if="formData">
          <span style="font-size: 16px; margin-right: 20px">
            {{ formData?.userName }}
          </span>
          <el-tag size="small" style="margin-right: 15px" type="warning">
            {{ getLabel('agent_status', formData?.agentStatus) }}
          </el-tag>
        </div>
      </template>
      <template #btn>
        <el-button class="border-btn" size="small" @click="handlBack">返回</el-button>
      </template>
    </header-module>
    <div style="background-color: white;padding-top: 20px">
      <el-form :inline="true" class="filter-form-inline" label-position="left" size="small">
        <el-row :gutter="40" style="margin-left: 0px; margin-right: 0px">
          <el-col :lg="8" :xs="4">
            <el-form-item label="代理商编号：">
              <span>{{ formData?.agentNumber }}</span>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xs="4">
            <el-form-item label="详细地址：">
              <span>{{ formData?.address }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div class="main-content" style="margin-top: 20px">

      <el-tabs v-model="activeName" class="elTabs" @tab-click="handleClick">
        <el-tab-pane label="详细信息" name="signedDetail">
          <el-form :inline="true" class="filter-form-inline" label-position="right" label-width="100px" size="small">
            <el-row :gutter="40" style="margin-left: 0px; margin-right: 0px">
              <el-col :span="24" style="padding-left: 0;padding-right: 0">
                <item-title title="基本信息" />
              </el-col>
              <el-col :lg="8" :xs="4">
                <el-form-item label="兼职人员姓名：" label-width="140px">
                  <span>{{ formData?.userName }}</span>
                </el-form-item>
              </el-col>
              <el-col :lg="8" :xs="4">
                <el-form-item class="item_col" label="性别：">
                  <span v-if="formData?.sex === '1'">男</span>
                  <span v-if="formData?.sex === '2'">女</span>
                </el-form-item>
              </el-col>
              <el-col :lg="8" :xs="4">
                <el-form-item label="联系电话：">
                  <span>{{ formData?.tel }}</span>
                </el-form-item>
              </el-col>
              <el-col :lg="8" :xs="4">
                <el-form-item label="身份证：">
                  <span>{{ formData?.cardNumber }}</span>
                </el-form-item>
              </el-col>
              <el-col :lg="8" :xs="4">
                <el-form-item label="创建人：">
                  <span>{{ formData?.creatorName }}</span>
                </el-form-item>
              </el-col>
              <el-col :lg="8" :xs="4">
                <el-form-item label="创建时间：">
                  <span> {{ dateFormat("yyyy-mm-dd HH:MM:SS", formData?.createdAt) }}</span>
                </el-form-item>
              </el-col>
              <el-col :lg="24" :xs="4">
                <el-form-item label="身份证附件：">
                  <div v-for="(item,index) in formData?.cardFiles" :key="index" class="file-item">
                    <image-upload-view :data="item" disabled="true" />
                  </div>
                </el-form-item>
              </el-col>
              <el-col :lg="24" :xs="4" style="padding-left: 0;padding-right: 0">
                <item-title title="资质信息" />
              </el-col>
              <el-col :lg="24">
                <div v-if="formData?.qualifications && formData?.qualifications.length > 0"
                  class="qualityFiles-container">
                  <div v-for="(item,index) in formData?.qualifications" :key="index" class="file-item">
                    <image-upload-view ref="imageUploadView" :data="item" disabled="true" />
                  </div>
                </div>
                <div v-else>
                  <el-empty description="该终端未上传资质" />
                </div>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="代理协议" name="agreement">
          <agreement v-if="activeName === 'agreement'" />
        </el-tab-pane>

        <el-tab-pane label="开发中终端" name="development">
          <development v-if="activeName === 'development'" />
        </el-tab-pane>

        <el-tab-pane label="交易终端" name="trading">
          <trading v-if="activeName === 'trading'" />
        </el-tab-pane>

        <el-tab-pane label="信用管理" name="credit">
          <credit v-if="activeName === 'credit'" :is-operation="false" />
        </el-tab-pane>

        <el-tab-pane label="兼职合同" name="contract">
          <contract v-if="activeName === 'contract'" :contract-data="contractData" />
        </el-tab-pane>

        <el-tab-pane label="跟进记录" name="followUp">
          <followUp v-if="activeName === 'followUp'" :objectId="formData?.id" customerType="1" />
        </el-tab-pane>

        <el-tab-pane label="联系人" name="contact">
          <contact v-if="activeName === 'contact'" type-data="agent_person"
            :pms="['crm:marketing:cooperationInformation:partTimeBigBag:contact:all']" />
        </el-tab-pane>

        <el-tab-pane label="修改记录" name="operationView">
          <operation-view v-if="activeName === 'operationView'" mode="agent" />
        </el-tab-pane>
      </el-tabs>

    </div>
  </div>
</template>

<script>
import {
  defineAsyncComponent,
  getCurrentInstance,
  inject,
  onMounted,
  reactive,
  toRefs,
} from "vue";
import { useRoute, useRouter } from "vue-router";

export default {
  name: "Signing",
  components: {
    agreement: defineAsyncComponent(() =>
      import("../../enterprise/modules/signedAgent/productAndPrice/index.vue")
    ),
    development: defineAsyncComponent(() =>
      import("../../enterprise/modules/signedAgent/development.vue")
    ),
    trading: defineAsyncComponent(() =>
      import("../../enterprise/modules/signedAgent/tradingTerminal/index.vue")
    ),
    credit: defineAsyncComponent(() =>
      import("@CRM/views/commonView/creditManagement/index.vue")
    ),
    contract: defineAsyncComponent(() =>
      import("@CRM/views/commonView/contract/contract.vue")
    ),
    contact: defineAsyncComponent(() =>
      import("@CRM/views/commonView/contact/contact.vue")
    ),
    followUp: defineAsyncComponent(() =>
      import("@CRM/views/marketing/customer/modules/followUp.vue")
    ),
  },
  setup(props, context) {
    const api = inject("api");
    const router = useRouter();
    const route = useRoute();
    const currentInstance = getCurrentInstance();
    const data = reactive({
      formData: {},
      activeName: "signedDetail",
      contractData: {
        id: Number(route.query.id),
        name: "",
        contractType: "agent",
        contractObjectType: "agent_person",
        title: "兼职合同详情",
        disabled: true,
        pms: [
          "crm:marketing:cooperationInformation:partTimeBigBag:contract:all",
        ],
      },
    });

    const handlDetail = (id) => {
      api.channelAgent.POTENTIALAGENT_DETAIL(id).then((res) => {
        if (res.code === 0) {
          data.formData = res.data.data;
          data.contractData.name = res.data.data.userName;
        }
      });
    };

    const handlDelete = () => {
      currentInstance.proxy
        .alertBox({ message: "删除数据后不可恢复,确定删除？" })
        .then(() => {
          api.channelAgent
            .POTENTIALAGENT_DELETE_LIST(route.query.id)
            .then((res) => {
              if (res.code === 0) {
                handlBack();
              } else {
                currentInstance.proxy.customMessage({
                  type: "error",
                  message: res.msg,
                });
              }
            });
        })
        .catch((err) => {
          console.log(err);
        });
    };

    const handlBack = () => {
      router.go(-1);
    };

    onMounted(() => {
      if (route.query.id) {
        handlDetail(route.query.id);
      }
    });

    return {
      ...toRefs(data),
      handlDetail,
      handlDelete,
      handlBack,
    };
  },
};
</script>

<style scoped>
/* @import url(); 引入css类 */
</style>
